<!-- 

  vue2 中使用 Object.freeze 冻结对象，让数据变成只读，数据中的属性也不会监听了

 -->

<template>
  <div class="demo-4">
    <el-row class="mb-4">
      <el-button type="primary" @click="btnClick">创建节点</el-button>
    </el-row>
    <div>
      <span>显示节点长度：</span>
      <span>{{ nodeData.length }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const nodeData = ref<readonly any[]>([]);

function btnClick() {
  // nodeData.value = Object.freeze(createNode());
  nodeData.value = createNode();
}

function createNode() {
  const data = [];
  for (let index = 0; index < 10000000; index++) {
    data.push({
      id: index,
      label: `节点${index}`,
      info: {
        name: `节点${index}`,
        value: index,
      },
    });
  }
  return data;
}
</script>

<style scoped>
.demo-4 {
  width: 200px;
  margin: 0 auto;
}
</style>
